<template>
    <div class="A">
        <li v-for="item in thisHist" :key="item._id">
            <img :src="item.avatar" alt="404">
            <div class="B">
                <span>{{item.bookname}}</span>
            <template>
                {{item.date | date}}
            </template>
            </div>
        </li>
    </div>
</template>

<script>
export default {
    created(){
        this.getThisUserHistory()
    },
    data(){
        return{
            thisHist:[]
        }
    },
    methods:{
        async getThisUserHistory(){
            console.log(this.$route.params.id);
            const {data:res} = await this.$http.get(`/users/thisUserHistory/${window.sessionStorage.getItem("userId")}`)
                 this.thisHist = res.data;
                 console.log(res);
        }

    }
}
</script>

<style lang="less" scoped>
li{
    list-style: none;
}

.A{
    height: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
img{
    height: 120px;
    width: 90px;
}
.A li{
    height: 150px;
    width: 200px;
    display: flex;
    align-items: center;
    border-style: dashed;
    border-width: 1px;
    margin: 1px;
    padding: 2px;
}
.B{
    display: flex;
    flex-direction: column;
}
</style>